<template>
  <div class="container">
    <slot name="head"></slot>

    <slot name="default">
      <div class="article-info">
        <div class="article-profile t-of-3">{{ profile?.introduction }}</div>
        <div class="article-links flex-c">
          <div class="link-item like-item" @click="doLikes">
            <img
              :src="loadAssetsURL('article/like.png')"
              alt="点赞"
              v-if="profile.like_state == '1'"
            />
            <img :src="loadAssetsURL('article/isLike.png')" alt="点赞" v-else />
            <p
              class="link-count"
              :style="{ color: profile.like_state == '1' ? '#000' : '#0075ff' }"
            >
              {{ profile?.likes }}
            </p>
          </div>

          <div class="link-item">
            <img :src="loadAssetsURL('article/look.png')" alt="查看" />
            <p class="link-count">{{ profile?.views }}</p>
          </div>

          <div class="link-item">
            <img :src="loadAssetsURL('article/message.png')" alt="回复" />
            <p class="link-count">{{ profile?.comments }}</p>
          </div>

          <div class="link-item">
            <p class="link-author" @click="goUserDetail('author', profile)">
              作者:{{ profile?.nickname ? profile?.nickname : '无名' }}
            </p>
          </div>
        </div>
        <div class="enter" :class="{ notClick: !articleStore.focusInput }">
          <el-input
            v-model="myReply"
            type="textarea"
            placeholder="输入评论..."
            maxlength="10000"
            :show-word-limit="articleStore.focusInput"
            @focus="articleStore.focusInput = true"
            @blur="delayBlur"
          />
          <el-button class="textBtn" type="primary" round @click="sendReply">发送</el-button>
        </div>
      </div>
    </slot>

    <div class="reply">
      <div class="replay-item" v-for="(replayItem, rIndex) in profile?.list" in rIndex>
        <div class="replay-father">
          <el-image
            class="father-avatar"
            :src="
              replayItem[0].commentator_image
                ? replayItem[0].commentator_image
                : loadAssetsURL('default/default_avatar.png')
            "
            @click="goUserDetail('father', replayItem[0])"
          >
            <template #error>
              <div class="image-slot" @click="goUserDetail('father', replayItem[0])">
                <img :src="loadAssetsURL('default/default_avatar.png')" alt="" />
              </div> </template
          ></el-image>
          <div class="father-right">
            <div class="father-top">
              <p class="father-userName">{{ replayItem[0].commentator }}</p>
              <p class="father-author" v-if="replayItem[0].state == 1">作者</p>
            </div>

            <p
              class="father-comment t-of-9"
              :class="[{ underline: replayItem[0].comment?.length >= 200 }, { showAll: showAll }]"
              @click="goCommentDetail('father', replayItem)"
            >
              {{ replayItem[0].comment }}
            </p>
            <div class="father-bottom flex-b-c">
              <p class="father-date">{{ trimDate(replayItem[0].comment_time) }}</p>
              <div class="replayIcon">
                <img :src="loadAssetsURL('article/isMessage.png')" alt="回复" />
                <p @click="openReply('father', replayItem[0])">回复</p>
              </div>
            </div>
            <article-enter
              v-if="replayItem[0]?.isShowFather"
              @reply="replyComment"
              ref="ArticleEnterRef"
            ></article-enter>
          </div>
        </div>
        <template v-for="(child, cIndex) in replayItem" :key="cIndex">
          <div class="replay-child" v-if="cIndex < limit && child.response_id">
            <div class="child-top">
              <el-image
                class="child-avatar"
                :src="
                  child.respondent_image
                    ? child.respondent_image
                    : loadAssetsURL('default/default_avatar.png')
                "
                @click="goUserDetail('child', child)"
              >
                <template #error>
                  <div class="image-slot">
                    <img
                      :src="loadAssetsURL('default/default_avatar.png')"
                      alt=""
                      @click="goUserDetail('child', child)"
                    />
                  </div> </template
              ></el-image>
              <p class="child-userName">{{ child.respondent }}</p>
              <p class="article-author flex-c-c" v-if="child.state == 1">作者</p>
              <p class="answer-userName" v-if="child.answeredman">回复@{{ child.answeredman }}</p>
            </div>
            <p class="answer-comment" @click="goCommentDetail('child', child)">
              {{ child.response }}
            </p>
            <div class="child-bottom flex-b-c">
              <p class="child-date">{{ trimDate(child.response_time) }}</p>
              <div class="replayIcon">
                <img :src="loadAssetsURL('article/isMessage.png')" alt="回复" />
                <p @click="openReply('child', child)">回复</p>
              </div>
            </div>
            <article-enter
              v-if="child?.isShowChild"
              @reply="replyComment"
              ref="ArticleEnterRef"
            ></article-enter>
            <div class="see-more" v-if="replayItem?.length > 5 && cIndex == limit - 1">
              <p class="info">
                共<span>{{ replayItem?.length }}</span
                >条评论,
              </p>
              <p class="btn" @click="limit = replayItem.length + 1">点击查看</p>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { loadAssetsURL } from '@/utils/load-assets'
import ArticleEnter from './components/Article-Enter.vue'
import { useRouter } from 'vue-router'
import { responseCommentApi, commentArticleApi } from '@/service/api'
import { iscode } from '@/utils'
import useArticleStore from '@/stores/article/article'
import useProfileStore from '@/stores/profile/profile'
const articleStore = useArticleStore()
const profileStore = useProfileStore()
const ArticleEnterRef = ref<InstanceType<typeof ArticleEnter>>()
const props = defineProps<{ profile: any; showAll?: boolean }>()
const router = useRouter()
const emits = defineEmits(['comment', 'reply', 'like', 'refresh'])

//评论内容
const myReply = ref<string>('')

const delayBlur = () => {
  setTimeout(() => {
    articleStore.focusInput = false
  }, 100)
}

//评论文章
const sendReply = async () => {
  if (myReply.value) {
    let res = await commentArticleApi({ file_id: props.profile.file_id, comment: myReply.value })
    if (iscode(res, true)) {
      clearReply()
      emits('refresh')
    }
  }
}

const response_id = ref<number>(-1)

//回复评论
const replyComment = async (payload: any) => {
  let res = await responseCommentApi({ response_id: response_id.value, response: payload })
  if (iscode(res, true)) {
    emits('refresh')
  }
}

//打开回复框
const openReply = (type: string, item: any) => {
  for (const key in props.profile.list) {
    // console.log(props.profile.list[key])
    props.profile.list[key].map((item: any, index: number) => {
      item.isShowFather = false
      item.isShowChild = false
    })
  }
  if (type == 'father') {
    item.isShowFather = true
    response_id.value = item.id
  } else {
    item.isShowChild = true
    response_id.value = item.response_id
  }
}

//文章详情
const goCommentDetail = (type: string, item: any) => {
  if (type == 'father') {
    if (item[0].comment.length >= 200) {
      router.push({
        path: '/article-detail',
        query: { articleId: item[0].file_id, isQuality: item[0].id }
      })
    }
  }
}

//格式日期
const trimDate = (item: any) => {
  let temp = ''
  if (item) {
    temp = item.split('T')
  }
  return temp[0]
}

//点赞
const doLikes = () => {
  emits('like')
}

const limit = ref<number>(5)

//清空评论框
const clearReply = () => {
  myReply.value = ''
}

//用户详情
const goUserDetail = (type: string, item: any) => {
  let tempId = ''
  if (type == 'father') {
    tempId = item.commentator_id
  } else if (type == 'child') {
    tempId = item.respondent_id
  } else if (type == 'author') {
    tempId = item.author_id
  }
  profileStore.isEditArticle = false

  router.push({
    path: '/profile',
    query: {
      userId: tempId
    }
  })
}
defineExpose({ clearReply })
</script>

<style lang="less" scoped>
.container {
  background: #ffffff;
  // box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
  // border-radius: 7px 7px 7px 7px;
  width: 503px;
  position: sticky;
  top: 150px;
  .article-info {
    padding: 0 23px;
    margin-bottom: 65px;
    .article-profile {
      background: #f4f4f4;
      border-radius: 7px 7px 7px 7px;
      font-weight: 400;
      color: #999;
      font-size: 15px;
      line-height: 37px;
      padding: 10px 30px;
    }
    .article-links {
      margin-top: 24px;
      margin-left: 20px;
      .link-item {
        font-size: 19px;
        font-weight: 500;
        color: #000000;
        display: flex;
        align-items: center;
        margin-right: 30px;
        img {
          width: 19px;
          margin-right: 8px;
        }
      }
      .like-item {
        cursor: pointer;
      }
      .link-author {
        cursor: pointer;
        font-size: 19px;
        font-weight: 500;
        color: #0075ff;
      }
    }
    .enter {
      margin-top: 40px;
      border-radius: 7px 7px 7px 7px;
      background: #f8f8f8;
      display: flex;
      flex-direction: column;
      :deep(textarea) {
        resize: none;
        height: 213px;
        border: none;
        line-height: 24px;
        padding: 13px 27px;
        background: #f8f8f8;
        box-shadow: none;
        transition: all 0.3s ease;
      }
      :deep(textarea) {
        outline: none;
      }
      :deep(.el-textarea .el-input__count) {
        background: #f8f8f8;
        bottom: -20px;
      }
      .textBtn {
        width: 103px;
        height: 37px;
        margin: 35px 15px 15px auto;
      }
    }
    .notClick {
      flex-direction: row;
      align-items: center;
      :deep(textarea) {
        height: 44px;
      }
      .textBtn {
        margin: 0px 15px 0px auto;
      }
    }
  }
  .reply {
    // margin-top: 65px;
    padding: 0 13px 65px 13px;
    max-height: 1330px;
    overflow-y: scroll;
    .replay-item {
      margin-bottom: 27px;
      margin-right: 30px;
      .replay-father {
        display: flex;
        .father-avatar {
          flex: none;
          width: 58px;
          height: 58px;
          border-radius: 84px 84px 84px 84px;
          cursor: pointer;
        }
        .father-right {
          width: 371px;
          flex: auto;
          margin-top: 22px;
          margin-left: 15px;
          .father-top {
            display: flex;
            align-items: baseline;
            .father-userName {
              font-size: 17px;
              font-weight: 500;
              color: #000000;
            }
            .father-author {
              margin-left: 10px;
              width: 43px;
              height: 20px;
              border-radius: 3px 3px 3px 3px;
              border: 1px solid #0075ff;
              font-size: 14px;
              font-weight: 400;
              color: #434343;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }

          .father-comment {
            margin-top: 18px;
            font-size: 17px;
            font-weight: 500;
            color: #252525;
            line-height: 37px;
          }
          .underline {
            cursor: pointer;
            text-decoration: underline;
          }
          .showAll {
            -webkit-line-clamp: unset;
            text-decoration: none;
            cursor: auto;
          }
          .father-bottom {
            margin-top: 20px;
            .father-date {
              font-size: 16px;
              font-weight: 400;
              color: #666666;
            }
            .replayIcon {
              cursor: pointer;
              display: flex;
              align-items: center;
              img {
                width: 20px;
                margin-right: 5px;
              }
              p {
                color: #0075ff;
              }
            }
          }
        }
      }
      .replay-child {
        margin-top: 27px;
        margin-left: 73px;
        .child-top {
          display: flex;
          align-items: center;
          .child-avatar {
            cursor: pointer;
            width: 44px;
            height: 44px;
            border-radius: 53px 53px 53px 53px;
            margin-right: 12px;
          }
          .child-userName {
            font-size: 17px;
            font-weight: 500;
            color: #000000;
            margin-right: 10px;
          }
          .article-author {
            width: 43px;
            height: 20px;
            border-radius: 3px 3px 3px 3px;
            border: 1px solid #0075ff;
            font-size: 14px;
            font-weight: 400;
            color: #434343;
            margin-right: 10px;
          }
          .answer-userName {
            font-size: 17px;
            font-weight: 400;
            color: #999999;
          }
        }
        .answer-comment {
          margin-top: 18px;
          font-size: 17px;
          font-weight: 500;
          color: #252525;
          line-height: 37px;
        }
        .underline {
          text-decoration: underline;
        }
        .child-bottom {
          margin-top: 20px;
          .child-date {
            font-size: 16px;
            font-weight: 400;
            color: #666666;
          }
          .replayIcon {
            cursor: pointer;
            display: flex;
            align-items: center;
            img {
              width: 20px;
              margin-right: 5px;
            }
            p {
              color: #0075ff;
            }
          }
        }
        .see-more {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 27px;

          user-select: none;
          .info {
            font-size: 16px;
            font-weight: 500;
            color: #999999;
            margin-right: 5px;
          }
          .btn {
            cursor: pointer;
            color: #0075ff;
          }
        }
      }
      .replay-child:last-child {
        border-bottom: 1px solid rgba(153, 153, 153, 0.6);
        padding-bottom: 20px;
      }
    }
    .replay-item:last-child {
      .replay-child {
        border-bottom: none;
      }
    }
  }
}
</style>
